<template>
  <div class="orderList orderLayout">
    <div class="content">
      <div class="nav-bar" style="height:1.2rem;">
      </div>
      <div>
        <div class="list" v-if="orderList.length > 0">
          <div class="list-item" v-for="item in orderList">
            <div class="product">
              <div class="thumb">
                <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1031_product2.jpg">
              </div>
              <div class="detail">
                <li class="fz16 gray">{{item.user.username}}-{{item.user.phone}}</li>
                <li class="address"><span>快递地址</span><span>{{item.detailAddress}}</span></li>
              </div>
            </div>
            <div class="amount gray">
              <span><span class="fz12">购买数量</span>&nbsp;&nbsp;<span class="fz16">{{item.items[0]['quantity']}}</span></span>
              <span><span class="fz12">实付金额&nbsp;&nbsp;&yen;</span><span class="fz16">{{item.items[0]['realamount']}}</span></span>
            </div>
            <div class="amount_detail">
              <span>总金额&nbsp;&nbsp;{{item['amount']}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>使用积分&nbsp;&nbsp;{{item['credit']}}</span>
            </div>
            <div class="handle">
              <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/online.png" class="icon">{{item.payType == 200 ? '线上支付' : '线下支付'}}</li>
              <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/clock.png" class="icon">{{item.createTime | unixToDate(true,true)}}</li>
            </div>
          </div>
        </div>
        <div v-else style="text-align: center;" class="list null">
          <span>这里还没有订单记录哦！</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Indicator } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { wxshare } from 'common/mixin'

export default {
  mixins: [wxshare],
  data() {
    return {
      orderList: []
    }
  },

  methods: {
    ...mapActions({
      ListChannelOrder: 'ListChannelOrder',
    }),
    getList() {
      Indicator.open();
      this.ListChannelOrder().then(result => {
        this.orderList = result.beanList;
        Indicator.close();
      }, error => {
        Indicator.close();
      })
    }
  },
  mounted() {
    this.getList();
  },
}
</script>
<style lang="less" scoped>
@import '../order/orderList.less';
@import '../order/orderPre.less';
.orderLayout .content {
    background-image: url(http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-header-background.png)
}
</style>
